<template>
	<view class="goodsDetails">
		<!-- 顶部自定义导航栏 -->
		<view class="top_nav">
			<navBar textcolor="#000" :showLeft="true" :showTitle="false"></navBar>
		</view>
		<!-- 轮播图 -->
		<swipers :goodsData="goodsData" @setShowVideo="setShowVideo"></swipers>
		<!-- 占位 -->
		<!-- #ifndef MP -->
		<view class="place" :style="'top:-' + toBar"></view>
		<!-- #endif -->
		<!-- 商品信息 -->
		<view class="goods_info">
			<view class="goods_name">
				{{goodsData.name}}
			</view>
			<view class="goods_price">
				<text class="money">￥{{goodsData.price}}</text>
				<text class="h_money">￥{{goodsData.origin_price}}</text>
			</view>
			<!-- <view class="shoucang">
				<view class="sc_icons" @tap="setisColl">
					<text :class="['iconfont',isColl == true?'icon-shoucang1':'icon-shoucang'] "
						:style="{color: isColl == true? colors :''}"></text>
				</view>
			</view> -->
		</view>
		<view class="goods-top">
			<view class="other">
				<p v-if="goodsData.post_area == ''">快递:包邮</p>
				<p v-else>快递费:0~{{Number(goodsData.postage)}}</p>
				<p>销量:{{goodsData.sell}}</p>
			</view>
			<!-- 分享按钮 -->

			<view class="sendprice">
				<view class="sendbox">
					<text class="green">消费赠送</text>
					<text>{{sendZ}}绿色积分</text>
				</view>
				<!-- <view class="sendbox">
				<text class="green">分享奖励</text>
				<text>{{sendS}}绿色积分</text>
			</view> -->
			</view>
			<view class="other" v-if="  goodsData.post_area != ''" @tap="showService">
				<p>不包邮地区:{{goodsData.post_area}}</p>
				<!-- <p v-else>快递费:10元</p> -->
			</view>
			<!-- 服务-模态层弹窗 -->
			<view class="popups service" :class="serviceClass" @touchmove.stop.prevent="discard" @tap="hideService">
				<!-- 遮罩层 -->
				<view class="mask"></view>
				<view class="layer" @tap.stop="discard">
					<view class="content">
						不包邮地区: {{goodsData.post_area}}
					</view>
					<view class="btn">
						<view class="button" @tap="hideService">完成</view>
					</view>
				</view>
			</view>
			<!-- 选择规格和优惠券 -->
			<view class="sku_pon">
				<view class="cell" @tap="openSku">
					<text class="text1">商品规格：</text>
					<text class="text2">类型...</text>
					<!-- <image src="/static/images/home/right.png"></image> -->
				</view>

			</view>
		</view>

		<!-- 商品详情 -->
		<view class="details">
			<view class="details_title">
				—— <text> 商品详情 </text> ——
			</view>
			<view class="details_content">
				<view class="content" v-html="getContent(goodsData.detail)">

				</view>
			</view>
		</view>
		<!-- 底部操作栏 -->
		<view class="footer" v-if="!is_shop">
			<view class="icons">
				<view class="box" @tap="toCart">
					<view class="icon cart"></view>
					<view class="text">购物车</view>
				</view>
				<view class="box" @tap="keep">
					<view class="icon" :class="[isKeep?'shoucangsel':'shoucang']"></view>
					<view class="text">{{isKeep?'已':''}}收藏</view>
				</view>
			</view>
			<view class="btn">
				<view class="joinCart" @tap="openSku">加入购物车</view>
				<view class="buy" @tap="openSku">立即购买</view>
			</view>
		</view>
		<view class="footer footer_text" v-else>

			<view class="btn">
				<!-- <view class="joinCart" @tap="openSku">加入购物车</view> -->
				<view class="buy" @tap="call">商家联系方式：{{phone}}</view>
			</view>
		</view>

		<!-- 规格弹出层 -->
		<sku :skuList="nowList" :showModal="showModal" :colors="colors" bottoms="0" @onhide="onhide">
		</sku>
		<!-- 返回顶部按钮 -->
		<view class="go_top" :style="'right: ' + (scrollShow == true ? '3%':'-200upx')">
			<view class="ontop" @tap="goTop">
				TOP
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="center_poter" style="margin: 0 auto;" v-if="shows">
				<!-- #ifndef MP -->
				<image class="close_btn" src="/static/images/goods/close.png" @click="hidePoster">
				</image>
				<!-- #endif -->
				<!-- #ifdef MP -->
				<cover-image class="close_btn" src="/static/images/goods/close.png" @click="hidePoster">
				</cover-image>
				<!-- #endif -->
				<poster :posterData="goodsData"></poster>
			</view>
		</uni-popup>

		<!-- <loading v-if="isShow == true"></loading> -->
	</view>
</template>

<script>
	import {
		GoodsDetail,
		GoodsCollect
	} from "@/api/api.js"
	var app = getApp();
	import navBar from "../commponent/public/navBar";
	import sku from "../commponent/public/sku";
	import coupon from "../commponent/public/coupon";
	import loading from "../commponent/public/loading";
	import poster from '../commponent/goods/poster.vue'
	import swipers from './swiper/swiper.vue'
	export default {
		data() {
			return {
				colors: '',
				shows: false,
				statusBarHeight: app.globalData.statusHeight + 'px',
				toBar: app.globalData.toBar + 'px',
				showdots: false,
				swiperList: [],
				isColl: false,
				latitude: '',
				longitude: '',
				nowList: {
					goods: {
						name: '',
						price: '',
						leixing: 1,
						attribute_result: ''
					}
				},

				goodsData: {

				},
				showModal: false,
				couponshow: false,
				isshowVideo: true,
				voice: false,
				showVideo: false,
				isShow: true,
				htmlNode: '',
				scrollShow: false,
				skuShow: false,
				isKeep: false, //收藏
				sendZ: 0, //消费赠送
				sendS: 0, //分享奖励
				serviceClass: '', //服务弹窗css类，控制开关动画
				is_shop: false,
				phone: ''
			};
		},
		components: {
			navBar,
			sku,
			coupon,
			loading,
			poster,
			swipers
		},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(e) {
			var pages = getCurrentPages()
			if (pages.length > 1) {
				//上一页
				let route = pages[pages.length - 2].route
				console.log(pages, route);
				if (route == 'pages/tabBar/business/goodslist/goods-list') {
					this.is_shop = true
				} else if (route == 'pages/tabBar/business/detail/premium') {
					this.is_shop = true
				}
			}
			this.GoodsDetail(e.id)
			this.setData({ //设置主题颜色
				colors: app.globalData.newColor
			});

			setTimeout(() => {
				this.setData({
					isShow: false
				});
			}, 600);
			// #ifdef APP-PLUS
			this.toBar = app.globalData.toBar + 25 + 'px'
			// #endif
			this.newVideo = uni.createVideoContext('newVideo');
		},
		/**
		 * 生命周期函数--监听页面滚动
		 */
		onPageScroll: function(e) {
			if (e.scrollTop >= 400) {
				this.scrollShow = true
			} else {
				this.scrollShow = false
			}
		},

		methods: {
			discard() {

			},
			call() {
				uni.makePhoneCall({
					phoneNumber: this.phone
				})
			},
			//服务弹窗
			showService() {
				console.log('show');
				this.serviceClass = 'show';
			},
			//关闭服务弹窗
			hideService() {
				this.serviceClass = 'hide';
				setTimeout(() => {
					this.serviceClass = 'none';
				}, 200);
			},
			//富文本
			getContent(content) {
				if (typeof(content) == 'string')
					return content.replace(/<img src="/g, '<img style="max-width:100%;width:100%;display:block;" src="' +
						getApp()
						.globalData.data
						.websiteUrl)
			},
			//收藏
			keep() {
				GoodsCollect({
					goods_id: this.goodsData.id
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
					if (res.status == 1) {
						this.isKeep = res.data.is_collect;
					}
				})
			},
			GoodsDetail(id) {
				GoodsDetail({
					id: id
				}).then(res => {
					this.goodsData = res.data.goods
					this.isKeep = this.goodsData.is_collect
					this.phone = res.data.phone
					// let attr = res.data.goods.attribute_result
					// attr = JSON.parse(attr)
					this.nowList = res.data
					let price = 0
					if (this.goodsData.leixing == 2) { //多规格
						price = this.goodsData.price
					} else { //单规格
						price = this.nowList.attribute[0].price
					}

					if (this.goodsData.goods_class.multiple != 3) {
						this.sendZ = parseFloat(price * this.goodsData.goods_class.multiple).toFixed(2)
					} else {
						this.sendZ = parseFloat(this.goodsData.goods_class.give_amount)
					}
					this.sendS = parseFloat(this.sendZ * (this.nowList.percent / 100)).toFixed(2)
					let footerlist = uni.getStorageSync('myfooter')
					if (footerlist == '') {
						let goodslist = []
						goodslist.push(this.goodsData)
						uni.setStorage({
							key: 'myfooter',
							data: goodslist
						})
					} else {
						let hasList = footerlist.findIndex(item => item.id == this.goodsData.id)

						if (hasList == -1) {
							let goodslist = footerlist
							goodslist.push(this.goodsData)
							uni.setStorage({
								key: 'myfooter',
								data: goodslist
							})
						}
					}
				})
			},
			setFrom(html) {
				//处理富文本 让图片居中适应
				if (typeof(html) == 'string') {
					let newContent = html.replace(/<img src="/g, '<img  src="' + getApp()
						.globalData.data
						.websiteUrl)
					this.setData({
						htmlNode: newContent
					});
				}

			},
			openPoster() { //生成海报
				this.shows = false
				uni.showLoading({
					title: '海报绘制中..'
				})
				this.$refs.popup.open()
				setTimeout(() => {
					uni.hideLoading()
					this.shows = true
				}, 600)
			},
			hidePoster() { //关闭海报
				this.$refs.popup.close()
			},
			setisColl() {
				//收藏与取消收藏
				let iscoll = !this.isColl;
				this.setData({
					isColl: iscoll
				});
			},
			openMap() {
				//打开地图
				let that = this;
				uni.openLocation({
					latitude: 39.90,
					longitude: 116.40,
					success: e => {

					}
				});
			},
			nearAddress() {
				if (this.longitude !== '') {
					this.openMap();
				} else {
					const _this = this; // 处理拒绝再次打开调用设置
					uni.getSetting({
						success(res) {
							if (res && res.authSetting && res.authSetting.hasOwnProperty('scope.userLocation')) {
								uni.openSetting({
									success() {
										_this.getLocation();
									}

								});
							}
						}

					});
				}
			},
			setShowVideo(showVideo, isH5) { //操作视频
				this.showVideo = showVideo
				if (isH5 == true) {
					this.newVideo.play()
				}
			},
			hideShow() {
				this.showVideo = false
			},
			ondefault() { //阻止事件 抛弃

			},
			onhide() {
				this.showModal = false
			},
			openSku() {
				if (this.is_shop) {
					return false
				}
				this.showModal = true
			},
			opencoupon() {
				this.couponshow = true
			},
			hidecoupon() {
				this.couponshow = false
			},
			toHome() {
				uni.switchTab({
					url: '/pages/views/tabBar/home'
				});
			},

			toCart() {
				uni.switchTab({
					url: '/pages/tabBar/cart/cart'
				});
			},
			goTop() { //返回顶部
				uni.pageScrollTo({
					scrollTop: 0
				});
			},
		}
	};
</script>
<style scoped lang="scss">
	@import "./goodsDetails.scss";

	/deep/.rich-img {
		width: 100%;
		height: auto;
	}

	@keyframes showPopup {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes hidePopup {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	@keyframes showLayer {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(-100%);
		}
	}

	@keyframes hideLayer {
		0% {
			transform: translateY(-100%);
		}

		100% {
			transform: translateY(0);
		}
	}

	.details_content {
		overflow: hidden;
		padding-bottom: 40px;

		image {
			width: 100% !important;
			display: block !important;
			max-width: 100% !important;
		}
	}

	.sendprice {
		display: flex;
		align-items: center;
		font-size: 13px;
		padding-left: 15px;
		margin: 5px 0;

		.green {
			background: #8980FD;
			color: #fff;
			padding: 2px 3px;
			border-radius: 3px;
		}

		text {
			color: #fff;
			margin-right: 5px;
		}
	}

	.popups {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 20;
		display: none;

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 21;
			background-color: rgba(0, 0, 0, 0.6);
		}

		.layer {
			position: fixed;
			z-index: 22;
			bottom: -70%;
			width: 92%;
			padding: 0 4%;
			height: 70%;
			border-radius: 20upx 20upx 0 0;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;

			.content {
				width: 100%;
				padding: 20upx 0;
				font-size: 14px;
			}

			.btn {
				width: 100%;
				height: 100upx;

				.button {
					width: 100%;
					height: 80upx;
					border-radius: 40upx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #f47952;
					font-size: 28upx;
				}
			}
		}

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.2s linear both;
			}

			.layer {
				animation: showLayer 0.2s linear both;
			}
		}

		&.hide {
			display: block;

			.mask {
				animation: hidePopup 0.2s linear both;
			}

			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}

		&.none {
			display: none;
		}

		&.service {
			.row {
				margin: 30upx 0;

				.title {
					font-size: 30upx;
					margin: 10upx 0;
				}

				.description {
					font-size: 28upx;
					color: #999;
				}
			}
		}


	}

	.footer {
		position: fixed;
		bottom: 0upx;
		width: 92%;
		padding: 0 4%;
		height: 99upx;
		background-color: #1E293B;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.icons {
			display: flex;
			height: 80upx;
			margin-left: -4%;

			.box {
				width: 80upx;
				height: 80upx;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				margin-left: 5px;

				.icon {
					font-size: 40upx;
					color: #63738A;
				}

				.text {
					display: flex;
					justify-content: center;
					width: 100%;
					font-size: 22upx;
					color: #63738A;
				}
			}
		}

		.btn {
			height: 80upx;
			border-radius: 40upx;
			overflow: hidden;
			display: flex;
			margin-right: -2%;

			.joinCart,
			.buy {
				height: 80upx;
				padding: 0 40upx;
				color: #fff;
				display: flex;
				align-items: center;
				font-size: 28upx;
			}

			.joinCart {
				background-color: #798ad6c4;
			}

			.buy {
				background-color: #798AD6;
			}
		}
	}

	.footer_text {
		text-align: center;
		justify-content: center;

		text {
			text-align: center;
			color: #f06c7a;
		}

		.btn {
			width: 100%;

			.buy {
				width: 100%;
				text-align: center;
				justify-content: center;
				font-size: 16px;
			}
		}
	}
</style>